<template>
    <view class="container">
        <!-- 自定义导航栏 -->
        <uni-nav-bar title="商家消息" :border="false"></uni-nav-bar>

        <!-- 消息分类切换 -->
        <view class="segmented-control">
            <uni-segmented-control :current="activeIndex" :values="['全部', '系统通知', '订单消息', '活动促销']"
                @clickItem="onClickItem" style-type="button" active-color="#2979FF"></uni-segmented-control>
        </view>

        <!-- 消息列表 -->
        <scroll-view scroll-y class="message-list">
            <uni-list>
                <uni-list-item v-for="(item, index) in filteredMessages" :key="index" :title="item.title"
                    :note="item.content" clickable @click="onMessageClick(item)">
                    <!-- 左侧图标 -->
                    <template v-slot:header>
                        <view class="message-icon">
                            <uni-icons :type="item.iconType" :color="item.iconColor" size="24"></uni-icons>
                        </view>
                    </template>

                    <!-- 右侧附加信息 -->
                    <template v-slot:footer>
                        <view class="message-right">
                            <text class="time">{{ item.time }}</text>
                            <uni-badge v-if="!item.read" text="未读" type="error" size="small"></uni-badge>
                        </view>
                    </template>
                </uni-list-item>
            </uni-list>

            <!-- 空状态 -->
            <view v-if="filteredMessages.length === 0" class="empty">
                <uni-icons type="email" size="60" color="#999"></uni-icons>
                <text class="empty-text">暂无消息</text>
            </view>
        </scroll-view>
        <tab-bar :current-index="1" />
    </view>
</template>

<script>
    import tabBar from '@/pages/components/tabBar.vue';
    import {
        isLogin
    } from '../tools/tools'
    export default {
        components: {
            tabBar
        },
        data() {
            return {
                activeIndex: 0,
                messages: [{
                        id: 1,
                        type: 'system',
                        title: '系统维护通知',
                        content: '系统将于2023-12-25 00:00至06:00进行维护升级',
                        time: '12-24 15:30',
                        read: false,
                        iconType: 'sound',
                        iconColor: '#2979FF'
                    },
                    {
                        id: 2,
                        type: 'order',
                        title: '新订单提醒',
                        content: '您有新的订单待处理，订单号：20231224123456',
                        time: '12-24 14:15',
                        read: false,
                        iconType: 'cart',
                        iconColor: '#4CAF50'
                    },
                    {
                        id: 3,
                        type: 'promotion',
                        title: '双十二活动通知',
                        content: '双十二大促活动即将开始，请提前做好准备',
                        time: '12-23 10:00',
                        read: true,
                        iconType: 'shop',
                        iconColor: '#FF9800'
                    }
                ]
            }
        },
        computed: {
            filteredMessages() {
                const types = ['all', 'system', 'order', 'promotion']
                const currentType = types[this.activeIndex]

                return currentType === 'all' ?
                    this.messages :
                    this.messages.filter(msg => msg.type === currentType)
            }
        },
        methods: {
            onClickItem(index) {
                this.activeIndex = index
            },
            onMessageClick(item) {
                // 标记为已读
                if (!item.read) {
                    item.read = true
                }

                // 跳转到消息详情（示例）
                uni.navigateTo({
                    url: `/pages/message/detail?id=${item.id}`
                })
            }
        },
        onShow: async () => {
            isLogin()
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        height: 100vh;
        background-color: #f5f5f5;
        padding: 20rpx 20rpx 100rpx 20rpx;
    }

    .segmented-control {
        padding: 20rpx;
        background-color: #fff;
    }

    .message-list {
        height: calc(100vh - 200rpx);
        padding: 20rpx;
    }

    .message-icon {
        margin-right: 20rpx;
        display: flex;
        align-items: center;
    }

    .message-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        .time {
            font-size: 24rpx;
            color: #999;
            margin-bottom: 8rpx;
        }
    }

    .empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 60vh;

        &-text {
            color: #999;
            font-size: 28rpx;
            margin-top: 20rpx;
        }
    }

    // 未读消息样式
    ::v-deep .uni-list-item__content-title {
        font-weight: bold;

        .read {
            font-weight: normal;
        }
    }
</style>